<template>
    <div>
        <div class="head-top"></div>
        <div class="panel" :style="_style">
            <div class="left">
                <text class="left-t" v-if="leftText != undefined" :style="_leftTextStyle" @click="leftClick">{{leftText}}</text>
                <image v-else class="left-i" :src="_leftIcon" :style="_leftImgStyle" @click="leftClick"></image>
            </div>
            <div class="middle">
                <text class="middle-t" :style="_middleTextStyle">{{middleText}}</text>
            </div>
            <div class="right" >

                <wxc-icon class="right-icon"   v-for="icon in rightIcons" :name="icon"  :icon-style="{color:'white',fontSize:36}" @wxcIconClicked="rightClick(icon)"></wxc-icon>
                <text class="right-t" v-if="rightText != undefined" @click="rightClick('rightText')" :style="_rightTextStyle">{{rightText}}</text>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .right-icon{
        margin-left:20px;
        padding-bottom: 8px;
    }
    .right-t{
        color: white;
        font-size: 32px;
        padding-left: 20px;
    }
    .middle-t{
        color: white;
        font-size: 32px;
        padding-left: 20px;
    }

    .left-t{
        color: white;
        font-size: 32px;
        padding-left: 20px;
    }
    .left{
        width: 200px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .middle{
        align-items: center;
        justify-content: center;
        width: 350px;
    }

    .right{
        width: 200px;
        align-items: flex-end;
        justify-content: flex-end;
        padding-right:20px;
        flex-direction: row;
    }

    .panel{
        width: 750px;
        background-color: #01A65A;
        flex-direction: row;
    }
    .head-top{
       height: 40px;
        background-color: #01A65A;
    }
</style>

<script>
    import {WxcIcon} from 'weex-ui'

    import stl from '../utils/stringUtils.js'

    export default {
        components: {WxcIcon},
        props:{
            leftIcon:{
                type:String
            },
            leftText:{
                type:String
            },
            middleText:{
                type:String
            },
            headStyle:{
                type:String
            },
            height:{
                type:String
            },
            rightText:{
                type:String
            },
            leftClick:{
                type:Object
            },
            rightIcons:{
                type:Object,
                default:[]
            },
            rightClick:{
                type:Object
            }
        },
        data () {
            return {
                leftStyle:{}
            }
        },
        computed:{
            _style:function () {
                var style = {}
                if(this.height) {
                    style.height = this.height
                    style['padding-top'] = parseInt(this.height*0.1)
                    style['padding-bottom'] = parseInt(this.height*0.1)
                }

                if(stl.isUnNon(this.headStyle)) {
                    var inputStyle = JSON.parse(this.headStyle)
                    return Object.assign(style, inputStyle)
                }else{
                    return style
                }
            },


            _leftImgStyle:function () {
              if(this.height) {
                  var h = parseInt(this.height*0.8)
                  return {height:h,width:h}
              }
            },

            _leftTextStyle:function () {
                return this.autoHeight()

            },

            _middleTextStyle:function () {
                return this.autoHeight()

            },

            _leftIcon:function () {
                if(stl.isUnNon(this.leftIcon)) {
                    return this.leftIcon
                }
                return 'root:img/return.png'
            },

            _rightTextStyle:function () {
               return this.autoHeight()
            }

        },
        methods:{
            //调整高度
            autoHeight(){
                if(this.height) {
                    var h = parseInt(this.height*0.8)
                    return {height:h,'padding-top':(h-32)/2,'padding-bottom':(h-32)/2}
                }
            }
        }
    }
</script>